import React, { Component } from 'react'
// @ts-ignore
import Styles from './index.module.scss'

interface StateInterface {
  date: Date
}

class Clock extends Component {

  /**
   * 定时器
   */
  timer?: NodeJS.Timeout
  /**
   * 秒转的圈数
   */
  secondCircle = 0

  state: StateInterface = {
    date: new Date()
  }

  componentDidMount() {
    this.setTimer()
  }

  componentWillUnmount() {
    clearInterval(this.timer!)
  }

  /**
   * 创建定时器
   */
  setTimer() {
    this.timer = setInterval(() => {
      this.setState(() => {
        return {
          date: new Date()
        }
      })
    }, 1000)
  }

  /**
   * 一位数字转换
   * @param num 数字
   */
  chinaWithOneNum(num: number): string {
    switch (num) {
      case 0:
        return '零'
      case 1:
        return '壹'
      case 2:
        return '贰'
      case 3:
        return '叁'
      case 4:
        return '肆'
      case 5:
        return '伍'
      case 6:
        return '陆'
      case 7:
        return '柒'
      case 8:
        return '捌'
      case 9:
        return '玖'
      default:
        return ''
    }
  }
  /**
   * 数字转中文
   * @param num 数字 0-60
   */
  chinaWithNum(num: number): string {
    if (num < 10) {
      return this.chinaWithOneNum(num)
    } else if (num === 10) {
      return '拾'
    } else if (num < 20) {
      const geNum = num % 10
      return `拾${this.chinaWithOneNum(geNum)}`
    } else if (num % 10 === 0) {
      const shiNum = Math.floor(num / 10)
      return `${this.chinaWithOneNum(shiNum)}拾`
    }
    const shiNum = Math.floor(num / 10)
    const geNum = num % 10
    return `${this.chinaWithOneNum(shiNum)}拾${this.chinaWithOneNum(geNum)}`
  }

  /**
   * 年数字转字符串
   * @param num 数字
   * @param count 长度
   * @param clearHeaderZero 清除首位零
   */
  yearStrWithNum(num: number, count: number): string {
    const arr = []
    let remainNun = num
    for (let i = 0; i < count; i++) {
      const geNum = remainNun % 10
      arr.unshift(geNum)
      remainNun = Math.floor(remainNun / 10)
    }
    const sreArr = arr.map((item: number) => {
      return this.chinaWithOneNum(item)
    })
    return sreArr.join('')
  }

  /**
   * 获取年字符串
   */
  getYearStr(): string {
    const { date } = this.state
    const year = date.getFullYear()
    return this.yearStrWithNum(year, 4) + '年'
  }

  /**
   * 获取当前月有多少天
   */
  getDayForMonth(): number {
    const date = new Date(this.state.date.getTime());
    const curMonth = date.getMonth()
    date.setMonth(curMonth + 1)
    date.setDate(0)
    return date.getDate()
  }

  /**
   * 获取DOM
   * @param count 个数
   * @param current 当前位置
   * @param className 类名
   * @param type 类型
   * @param zeroStar 是否从零开始
   */
  getDom(count: number, current: number, className: string, type: string, zeroStar = false) {
    const domArr = []
    const oneAngle = 360 / count
    const currentDateNum = new Date().getTime()
    for (let i = 0; i < count; i++) {
      const dateStr = this.chinaWithNum(i + (zeroStar ? 0 : 1))
      const angle = -oneAngle * i
      domArr.push(<span
        style={{ transform: `rotate(${angle}deg)` }}
        key={ `${dateStr}_${currentDateNum}` }
        className={`${Styles[className]} ${Styles['date-item']} ${current === domArr.length ? Styles['date-item-action'] : ''}`}>{dateStr}{type}</span>)
    }
    return domArr
  }

  /**
   * 获取月Dom
   */
  getMonthDom() {
    const current = this.state.date.getMonth()
    return this.getDom(12, current, 'month-item', '月')
  }

  /**
   * 日Dom
   */
  getDayDom() {
    const count = this.getDayForMonth()
    const current = this.state.date.getDate() - 1;
    return this.getDom(count, current, 'day-item', '日')
  }

  /**
   * 时Dom
   */
  getHourDom() {
    const current = this.state.date.getHours()
    return this.getDom(24, current, 'hour-item', '时', true)
  }

  /**
   * 分Dom
   */
  getMinuteDom() {
    const current = this.state.date.getMinutes()
    return this.getDom(60, current, 'minute-item', '分', true)
  }

  /**
   * 秒Dom
   */
  getSecondDom() {
    const current = this.state.date.getSeconds()
    return this.getDom(60, current, 'second-item', '秒', true)
  }

  /**
   * 
   * @param count 获取当前角度
   * @param current 
   * @param otherAngle 
   */
  currentAngle(count: number, current: number, otherAngle = 0): number {
    return 360 / count * current + otherAngle
  }

  /**
   * 当前秒角度
   */
  currentSecondAngle(): number {
    const otherAngle = Math.floor(this.state.date.getTime() / 60000) % 1000 * 360
    const current = this.state.date.getSeconds()
    return this.currentAngle(60, current, otherAngle)
  }

  currentMinuteAngle(): number {
    const otherAngle = Math.floor(this.state.date.getTime() / 3600000) % 1000 * 360
    const current = this.state.date.getMinutes()
    return this.currentAngle(60, current, otherAngle)
  }

  currentHourAngle(): number {
    const otherAngle = Math.floor(this.state.date.getTime() / 86400000) * 360
    const current = this.state.date.getHours()
    return this.currentAngle(24, current, otherAngle)
  }

  currentDayAngle(): number {
    const dayNum = this.getDayForMonth()
    const current = this.state.date.getDate() - 1;
    return this.currentAngle(dayNum, current)
  }

  currentMonthAngle(): number {
    const current = this.state.date.getMonth()
    return this.currentAngle(12, current)
  }

  render() {
    this.getMonthDom()
    return (
      <div className={ Styles['com-calendar'] }>
        <div className={`w-content-box ${Styles['com-clock']}`}>
          <span className={`${Styles['year']} ${Styles['date-box']}`}>{this.getYearStr()}</span>
          <div
            style={{ transform: `rotate(${this.currentMonthAngle()}deg)` }}
            className={`${Styles['month-dom']} ${Styles['date-box']}`}>
            {
              this.getMonthDom()
            }
          </div>
          <div
            style={{ transform: `rotate(${this.currentDayAngle()}deg)` }}
            className={`${Styles['day-dom']} ${Styles['date-box']}`}>
            {
              this.getDayDom()
            }
          </div>
          <div
            style={{ transform: `rotate(${this.currentHourAngle()}deg)` }}
            className={`${Styles['hour-dom']} ${Styles['date-box']}`}>
            {
              this.getHourDom()
            }
          </div>
          <div
            style={{ transform: `rotate(${this.currentMinuteAngle()}deg)` }}
            className={`${Styles['minute-dom']} ${Styles['date-box']}`}>
            {
              this.getMinuteDom()
            }
          </div>
          <div
            style={{ transform: `rotate(${this.currentSecondAngle()}deg)` }}
            className={`${Styles['second-dom']} ${Styles['date-box']}`}>
            {
              this.getSecondDom()
            }
          </div>
        </div>
      </div>
    )
  }
}

export default Clock